<template>
  <div>
    <BaseModal @onSubmit="onSubmit" @onClose="onClose" :show="show" title="编辑班级信息">
      <div class="demo-input-suffix">
        <span class="form-input-label">班级ID：</span>
        <el-input  v-if="data.class_id" disabled  v-model="data.class_id" placeholder="请输入班级ID"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">班级名称：</span>
        <el-input v-model="data.class_name" placeholder="请输入班级名称"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">年级：</span>
        <el-select v-model="data.grade" placeholder="请选择年级">
          <el-option
            v-for="item in grades"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">学校名称：</span>
        <el-autocomplete
          class="inline-input"
          v-model="selectedSchool"
          :fetch-suggestions="querySchool"
          placeholder="请输入学校名称"
          @select="selectSchool"
        ></el-autocomplete>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">学院名称：</span>
        <el-autocomplete
          class="inline-input"
          v-model="selectedCollege"
          :fetch-suggestions="queryCollege"
          placeholder="请输入学院名称"
          @select="selectCollege"
        ></el-autocomplete>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">专业名称：</span>
        <el-autocomplete
          class="inline-input"
          v-model="selectedMajor"
          :fetch-suggestions="queryMajor"
          placeholder="请输入专业名称"
          @select="selectMajor"
        ></el-autocomplete>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">班级状态：</span>
        <el-select v-model="data.status" placeholder="请选择班级状态">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </BaseModal>
  </div>
</template>
<script>
import modalClose from "@/mixins/modalClose";
import CreateFilter from "@/mixins/CreateFilter";
import { classModel } from "@/api/models";
import { Message } from "element-ui";
export default {
  mixins: [modalClose, CreateFilter],
  components: {},
  data() {
    return {
      data: {
        class_id: null,
        major_id: null,
        class_name: null,
        status: null,
        grade: null
      }
    };
  },
  props: {
    obj: {
      type: Object,
      default: null
    }
  },
  watch: {
    obj: function(value) {
       if(value) {
        classModel.item(value.class_id, res => {
          this.data = res.data;
          this.selectedSchool = res.data.school_name;
          this.selectedCollege = res.data.college_name;
          this.selectedMajor = res.data.major_name;
        })
      }else{
        this.data = {}
      }
    }
  },
  mounted() {},
  methods: {
    getItem() {
      classModel.item(this.id, res => {
        this.data = res.data;
      });
    },
    onSubmit() {
      let d = this.data;
      if (
        !d.class_name ||
        !d.grade ||
        !d.major_id ||
        !d.status
      ) {
        return Message.warning("请填完整信息");
      }
      if(d.class_id) {
        classModel.update(d.class_id, d, res => {
          Message.success(res.message)
          this.onClose()
          this.$emit('afterSubmit')
        }, err => {
          Message.error(err.message)
        })
      }else{
        classModel.create(d, res => {
          Message.success(res.message)
          this.onClose()
          this.$emit('afterSubmit')
        }, err => {
          Message.error(err.message)
        })
      }
    },
    onClose() {
      this.$emit("onClose");
    }
  }
};
</script>
<style lang="scss">
</style>